<template>
  <el-dialog title="新增/编辑 角色" :visible.sync="editDialogVisible" width="50%">
    <div>
      <!-- 表单 -->
      <el-form class="edit-form" :model="editRoleForm" :rules="editRoleFormRules" ref="editRoleFormRef" label-width="100px">
        <el-form-item label="角色名称" prop="username">
          <el-input v-model="editRoleForm.username" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item class="form-item-select" prop="permissions">
          <div class="tree">
            <div class="tree-title">角色配置</div>
            <!-- 树形控件 -->
            <el-tree v-if="editDialogVisible" class="tree-content" :data="menuList" :props="defaultProps" show-checkbox node-key="id" :default-expand-all="true" ref="treeRef" :default-checked-keys="defaultCheckedKeys">
            </el-tree>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onEditRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { editRoleRight, getRoleDetails } from '@/assets/api/user/roleRight.js'

export default {
  name: 'EditRole',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    menuList: {
      type: Array,
      required: true
    },
    role: {
      type: Object,
      required: true
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  created () { },
  data () {
    return {
      editDialogVisible: false,
      editRoleForm: {
        username: '',
        permissions: []
      },
      editRoleFormRules: {
        username: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 树形控件配置项
      defaultProps: {
        label: 'title',
        children: 'points'
      },
      // 默认选中 keys
      defaultCheckedKeys: []
    }
  },
  methods: {
    // 获取选中权限组成的数组
    getCheckedKeys () {
      this.editRoleForm.permissions = this.$refs.treeRef.getCheckedKeys()
    },
    // 编辑角色
    async onEditRole () {
      this.getCheckedKeys()
      try {
        await editRoleRight(this.role.id, {
          id: this.role.id,
          title: this.editRoleForm.username,
          permissions: this.editRoleForm.permissions
        })
        this.$message.success('编辑角色成功')
        this.editDialogVisible = false
        this.$emit('success', !this.flag)
        this.$nextTick(() => {
          this.$emit('success', !this.flag)
        })
      } catch (err) {
        this.$message.error('编辑角色失败')
      }
    },
    // 加载角色详情
    async loaderRoleDetails () {
      try {
        const { data: res } = await getRoleDetails(this.role.id)
        this.defaultCheckedKeys = res.permissions
      } catch (err) {
        this.$message.error('记载角色详情失败')
      }
    }
  },
  watch: {
    visible (val) {
      this.editDialogVisible = val
      this.loaderRoleDetails()
      this.defaultCheckedKeys = []

      this.editRoleForm.username = this.role.title
    },
    editDialogVisible (val) {
      this.$emit('update:visible', val)
    }
  }
}
</script>

<style  lang='less' scoped>
.edit-form {
  padding-top: 20px;
  padding: 20px 85px 0 40px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;

  .form-item-select {
    .tree {
      margin-left: -70px;

      .tree-title {
        border-bottom: 1px solid #ebebeb;
      }
    }
  }
}
</style>
